<template>
    <div class = "newsinfomain">
        <p class= "newsinfohead"><i class="el-icon-s-promotion"> 新闻详情 ></i></p>
        <span class="infohr"></span>
        <div class = "newsinfoleft">

        <h3 style="margin-left:30px;width:95%;margin-top:50px">{{this.news.title}}</h3>
        
        <div class="head">
            <ul>
                <li >mamba新闻</li>
                <li style="margin-left:30px;color:#aaa">{{dateFormat(this.news.created)}}</li>
                <li style="width:70%;text-align: right;color:#aaa">{{this.news.collectionCount}} 阅读 &nbsp;<i class="el-icon-thumb"></i> &nbsp;{{this.news.supportCount}} </li>
            </ul>
              <span class="infohr2"></span>
        </div>

         
        <div v-html="this.news.content" class="textcontent"></div>
        <div class = "infoleftbottom">
        
        <div class="zan" @click="addsupport" :class="{supportStyle2:supporttype === 1}">
               <i class="el-icon-thumb"   ><p style="font-size:15px;margin-top:5px" >{{this.news.supportCount}}</p></i>
         </div>
        </div> 
        </div>
        <div class="newsinforight">
              <img src="../../assets/ban5.jpg" alt="" style="margin-top:5px">
            <img src="../../assets/ban7.jpg" alt="">
        </div>

           
    </div>
</template>

<script>
import news from '@/api/news'
import moment from 'moment'
import cookie from 'js-cookie';
export default {
    data() {
        return{
            news:{},
            dianzannum:0,
            userinfo:{
                id:''
            },
            supportinfo:{
                userId:'',
                newsId:''
            },
            supporttype:0
            
        }
      },
      mounted(){
          this.getNews()
          this.addlook()
          this.initsupport()
      },
       methods: {
           dateFormat(date){
                if(date == undefined){return ''};
                return moment(date).format("YYYY-MM-DD")
          },
           getNews(){
               news.getnewsbyId(this.$route.params.id)
               .then(response =>{
                   this.news = response.data.news
               })
           },
           addlook(){
               news.addlook(this.$route.params.id)
               .then(response => {
                 this.dianzannum = response.data.dianzan+1
                    news.addlooknum(this.$route.params.id,this.dianzannum)
                    .then(response => {

               })
               })
              
           },
           initsupport(){
                var userStr = cookie.get('ucenter')
                if(userStr) {
                this.userinfo = JSON.parse(userStr)
                this.supportinfo.userId=this.userinfo.id
                this.supportinfo.newsId=this.$route.params.id
               }

               news.supportor(this.supportinfo)
               .then(response => {
                   console.log(response.data.result)
                   if(response.data.result===0){
                        this.supporttype = 1
                   }else{
                       this.supporttype = 0
                   }
               })

               
              },

              addsupport(){
                  if(this.userinfo.id===''){
                        this.$message({
                        type: 'false',
                        message: "你还没有登录"
                  })
                  }
                  else{
                      if(this.supporttype === 0 ){
                          news.addsupport(this.supportinfo)
                          .then(response => {
                             this.supporttype =1
                              news.updatesupportsum(this.supportinfo.newsId)
                              .then(response =>{
                                   
                                 this.getNews()
                              })
                          })
                      }else{
                           news.delsupport(this.supportinfo)
                          .then(response => {
                               this.supporttype =0
                              news.updatesupportsum(this.supportinfo.newsId)
                              .then(response =>{
                                 this.getNews()
                              })
                          })
                      }
                  }
              }
            
           
       }
}
</script>

<style scoped>
.head ul{
    list-style: none;
     margin-left: -1%;
     padding-top:10px;
}
.head li {
    float: left;
    font-size:16px;
}
.newsinfohead{
    font-size:18px;
    margin-left:10%;
    
}
.infohr{
    display: block;
    width: 80%;
    margin-left:10%;
    height: 10px;
    border-bottom: 1px solid gainsboro;
}
.textcontent{
    width: 95%;
    margin-left:3%;
    padding-top:30px;
        overflow: hidden;

}

.infohr2{
    display: block;
    width: 93%;
    margin-left:3%;
    margin-top:30px;
    height: 10px;
    border-bottom: 1px solid gainsboro;
}
.el-icon-s-promotion{
    color:rgb(0,98,161)
}
.item-type {
    color: #6388c5;
    border: 1px #6388c5 solid;
    display: inline-block;
    vertical-align: middle;
    width: 36px;
    height: 20px;
    box-sizing: border-box;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
}

.newsinfomain{
   width:100%;
   background-color: rgb(238,238,238);
   padding-top:80px;
   display: inline-block;
   overflow: hidden;
   min-height: 1000px;
 }
 .newsinfoleft{
   width:60%;
   min-height:500px;
   background-color:white;
   margin-left:10%;
   box-shadow: 0 0 10px #ddd;
   margin-top: 20px;
   display: inline-block;
   float: left;
   margin-bottom:100px;
 }
 
 .newsinfoul{
     list-style: none;
     width: 100%;
 }
.newsinfoul li{
     width: 95%;
     height: 90px;
     border-bottom: 1px solid gainsboro;
     line-height: 110px;
     cursor: pointer;
 }
 
.newsinfodate{
     display: inline-block;
     font-size: 14px;
     color: #9d9d9d;
 }
 .newsinforight{
     width:19%;
     height:600px;
     display: inline-block;
     margin-top:20px;
     margin-left:20px
 }
.infoleftbottom{
    width:100%;
    height:200px;
    display:inline-block;
}
 .newsinforight img{
     width:90%;
     margin-left:5%;
     border-radius: 10px;
     margin-top: 50px;
 }

 .zan{
     height: 60px;
     width: 60px;
     border: 1px solid #aaa;
     border-radius:50%;
     text-align: center;
     line-height: 50px;
     margin-left:40% ;
     display: inline-block;
     margin-top:60px;
     cursor: pointer;
 }
 .zan i{
     font-size:25px;
     margin-top:8px;
    
 }
 .zan{
      color:#aaa;
 }
.supportStyle2{
    color:rgb(0,98,161);
    border: 1px solid rgb(0,98,161);
}
</style>